<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="结算名称" prop="settleAccountsName">
				<el-input v-model="queryParams.settleAccountsName" placeholder="请输入结算名称" clearable maxlength="20" show-word-limit @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="批次" prop="batch">
				<el-input v-model="queryParams.batch" placeholder="请输入批次" clearable maxlength="20" show-word-limit @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:amount:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:amount:remove']">删除</el-button>
			</el-col>
			<!-- <el-col :span="1.5">
				<el-button  type="Info" icon="el-icon-download" size="mini"  @click="handleExport" v-hasPermi="['system:amount:export']">导出</el-button>
			</el-col> -->
			<CreateForm :ids="ids" formtype="t_amountData" />
			<right-toolbar @changeTableData="changeTableData" menuNames="amounts49" :showSearch.sync="showSearch" @queryTable="getList" perm="amount:amount:index" :columns.sync="columns"></right-toolbar>
		</el-row>
		<div :class="sidebar.opened && eleTabTop <= 85 ? 'eleTab' : !sidebar.opened && eleTabTop <= 85 ? 'eleTabs' : ''" class="informationTab" ref="eleTab">
			<el-table ref="table" @row-click="row_click" v-loading="loading" :data="configList" @selection-change="handleSelectionChange" border height="100%">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column type="index" width="55" align="center" label="序号" />
				<el-table-column label="结算名称" prop="settleAccountsName" :show-overflow-tooltip="true" min-width="150" v-if="columns[0].visible" />
				<el-table-column label="批次" prop="batch" :show-overflow-tooltip="true" min-width="150" v-if="columns[1].visible" />
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-edit" @click="handleReocrds(scope.row)" v-hasPermi="['system:package:record']">明细</el-button>
						<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:amount:edit']">修改</el-button>
						<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:amount:remove']">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<pagination menuNames="Pagination57" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		<!-- 添加或修改参数配置对话框 -->
		<el-dialog title="添加可以结算的产品列表" :visible.sync="open" width="100%" append-to-body v-dialogDrag>
			<el-form ref="form" :model="form" label-width="80px" :rules="rules">
				<el-form-item label="结算名称" prop="settleAccountsName">
					<el-input v-model="form.settleAccountsName" placeholder="请输入结算名称" maxlength="20" show-word-limit />
				</el-form-item>
				<el-form-item label="批次" prop="batch">
					<el-input v-model="form.batch" placeholder="请输入批次" maxlength="20" show-word-limit />
				</el-form-item>
			</el-form>
			<div class="userDialog">
				<div class="userLeft">
					<el-form :model="queryproductParams" ref="queryproductParams" size="small" :inline="true">
						<el-form-item label="返修单" prop="repairNumber">
							<el-input clearable style="width: 200px" v-model="queryproductParams.repairNumber" placeholder="请输入返修单" maxlength="20" show-word-limit />
						</el-form-item>
						<el-form-item label="产品编号" prop="productNumber">
							<el-input clearable style="width: 200px" v-model="queryproductParams.productNumber" placeholder="请输入产品编号" maxlength="20" show-word-limit />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryUser">搜索</el-button>
							<el-button icon="el-icon-refresh" size="mini" @click="resetQueryUser">重置</el-button>
						</el-form-item>
					</el-form>
					<el-table ref="multipleTable" height="488px" v-loading="productloading" :data="productList" @selection-change="handleSelectionProduct">
						<el-table-column type="selection" width="55" align="center" />
						<el-table-column type="index" width="55" align="center" label="序号" />
						<el-table-column label="返修单" prop="repairNumber" :show-overflow-tooltip="true" min-width="120"> </el-table-column>
						<el-table-column label="产品名称" prop="productName" :show-overflow-tooltip="true" min-width="120" />
						<el-table-column label="产品编号" prop="productNumber" :show-overflow-tooltip="true" min-width="120" />
						<el-table-column label="产品型号" prop="productModel" :show-overflow-tooltip="true" min-width="120" />
						<el-table-column label="送修单位" prop="clientName" :show-overflow-tooltip="true" min-width="120" />
						<el-table-column label="维修类别" prop="maintenanceCategoryName" :show-overflow-tooltip="true" min-width="120" />
						<el-table-column label="客户代表" prop="productRepresentativeName" :show-overflow-tooltip="true" min-width="120" />
					</el-table>
					<pagination v-show="producttotal > 0" :total="producttotal" :page.sync="queryproductParams.pageNum" :limit.sync="queryproductParams.pageSize" @pagination="getrepairProductList" />
				</div>
				<div class="userCenter">
					<div @click="setRight"><i class="el-icon-right"></i></div>
					<div @click="setLeft"><i class="el-icon-back"></i></div>
				</div>
				<div class="userRight">
					<el-table :data="selectProductList" height="488px" ref="rightTable" @selection-change="handleBackUser" border>
						<el-table-column type="selection" width="55" align="center" />
						<el-table-column type="index" width="55" align="center" label="序号" />
						<el-table-column label="返修单" prop="repairNumber" :show-overflow-tooltip="true" min-width="120"> </el-table-column>
						<el-table-column label="产品名称" prop="productName" :show-overflow-tooltip="true" min-width="120" />
						<el-table-column label="产品编号" prop="productNumber" :show-overflow-tooltip="true" min-width="120" />
						<el-table-column label="产品型号" prop="productModel" :show-overflow-tooltip="true" min-width="120" />
						<!-- <el-table-column label="送修单位" prop="clientName" :show-overflow-tooltip="true" min-width="120" />
						<el-table-column label="维修类别" prop="maintenanceCategoryName" :show-overflow-tooltip="true" min-width="120" />
						<el-table-column label="客户代表" prop="productRepresentativeName" :show-overflow-tooltip="true" min-width="120" /> -->
					</el-table>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog title="结算明细" :visible.sync="recordsopen" width="100%" append-to-body v-dialogDrag>
			<div style="height: 70vh; overflow: auto">
				<el-table class="hide-scrollbar" v-for="(item, index) in recordsList" :key="item.id" :span-method="param => objectSpanMethod(param, index)" :show-header="index == 0 ? true : false" v-loading="recordsloading" :data="item.settleAccountsParticularsList" border>
					<el-table-column label="返修任务单号" prop="repairNumber" :show-overflow-tooltip="true" min-width="130" />
					<el-table-column label="计划号" prop="bnumber" :show-overflow-tooltip="true" min-width="130" />
					<el-table-column label="产品型号" prop="productModel" :show-overflow-tooltip="true" min-width="130" />
					<el-table-column label="产品数量" prop="quantity" :show-overflow-tooltip="true" min-width="90" />
					<el-table-column label="产品编号" prop="productNumber" :show-overflow-tooltip="true" min-width="130" />
					<el-table-column label="申请日期" prop="applyTime" :show-overflow-tooltip="true" min-width="130" />
					<el-table-column label="零组件图号" prop="partFigure" :show-overflow-tooltip="true" min-width="150" />
					<el-table-column label="零组件名称" prop="partName" :show-overflow-tooltip="true" min-width="140" />
					<el-table-column label="领用数量" prop="partQuantity" :show-overflow-tooltip="true" width="170" align="center">
						<template slot-scope="scope">
							<el-input-number @change="changeNumber(item.settleAccountsParticularsList, index, scope.$index)" v-if="scope.$index != item.settleAccountsParticularsList.length - 1" v-model="scope.row.partQuantity" :step="1" step-strictly style="width: 140px"></el-input-number>
							<div v-else></div>
						</template>
					</el-table-column>
					<el-table-column label="材料价格" prop="priceMaterial" :show-overflow-tooltip="true" width="170" align="center">
						<template slot-scope="scope">
							<el-input-number v-if="scope.$index != item.settleAccountsParticularsList.length - 1" v-model="scope.row.priceMaterial" :precision="2" :step="0.1" :max="100000" style="width: 140px"></el-input-number>
							<div v-else></div>
						</template>
					</el-table-column>
					<el-table-column label="工时" prop="manHour" :show-overflow-tooltip="true" width="170" align="center">
						<template slot-scope="scope">
							<el-input-number v-if="scope.$index != item.settleAccountsParticularsList.length - 1" v-model="scope.row.manHour" :precision="2" :step="0.1" :max="100000" style="width: 140px"></el-input-number>
							<div v-else></div>
						</template>
					</el-table-column>
					<el-table-column label="50/小时" prop="fiftyHour" :show-overflow-tooltip="true" width="170" align="center">
						<template slot-scope="scope">
							<el-input-number v-if="scope.$index != item.settleAccountsParticularsList.length - 1" v-model="scope.row.fiftyHour" :precision="2" :step="0.1" :max="100000" style="width: 140px"></el-input-number>
							<div v-else></div>
						</template>
					</el-table-column>
					<el-table-column label="零件价格" prop="partsPrice" :show-overflow-tooltip="true" width="170" align="center">
						<template slot-scope="scope">
							<el-input-number @change="changeNumber(item.settleAccountsParticularsList, index, scope.$index)" v-if="scope.$index != item.settleAccountsParticularsList.length - 1" v-model="scope.row.partsPrice" :precision="2" :step="0.1" :max="100000" style="width: 140px"></el-input-number>
							<div v-else></div>
						</template>
					</el-table-column>
					<el-table-column label="合计" prop="total" :show-overflow-tooltip="true" width="170" align="center">
						<template slot-scope="scope">
							<el-input-number disabled @change="changeTotal(item.settleAccountsParticularsList, index)" v-if="scope.$index != item.settleAccountsParticularsList.length - 1" v-model="scope.row.total" :precision="2" :step="0.1" :max="100000" style="width: 140px"></el-input-number>
							<div v-else>{{ Number(scope.row.total).toFixed(2) }}</div>
						</template>
					</el-table-column>
					<el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" min-width="170" align="center">
						<template slot-scope="scope">
							<el-input v-model="scope.row.remark" maxlength="100" v-if="scope.$index != item.settleAccountsParticularsList.length - 1"></el-input>
							<div v-else></div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitRecords">确 定</el-button>
				<el-button @click="recordsopen = false">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog title="修改" :visible.sync="edit" width="80%" append-to-body v-dialogDrag>
			<el-form ref="editform" :model="editform" label-width="80px" :rules="rules">
				<el-form-item label="结算名称" prop="settleAccountsName">
					<el-input v-model="editform.settleAccountsName" placeholder="请输入结算名称" maxlength="20" show-word-limit />
				</el-form-item>
				<el-form-item label="批次" prop="batch">
					<el-input v-model="editform.batch" placeholder="请输入批次" maxlength="20" show-word-limit />
				</el-form-item>
			</el-form>
			<el-table :data="settleAccountsDetailList" border>
				<el-table-column prop="index" width="55" align="center" label="序号">
					<template slot-scope="scope">
						<!-- 根据条件判断是否显示序号 -->
						<span v-if="scope.$index != settleAccountsDetailList.length - 1">{{ scope.$index + 1 }}</span>
						<span v-else>合计</span>
					</template>
				</el-table-column>
				<el-table-column label="任务号" prop="repairNumber" :show-overflow-tooltip="true" min-width="150" />
				<el-table-column label="计划号" prop="bnumber" :show-overflow-tooltip="true" min-width="150" />
				<el-table-column label="产品型号" prop="productModel" :show-overflow-tooltip="true" min-width="150" />
				<el-table-column label="用户返修单价" align="center" prop="customerRepairPrice" :show-overflow-tooltip="true" min-width="230">
					<template slot-scope="scope">
						<el-input-number v-if="scope.$index != settleAccountsDetailList.length - 1" v-model="scope.row.customerRepairPrice" :precision="2" :step="0.1" :max="100000"></el-input-number>
						<div v-else>{{ scope.row.customerRepairPrice }}</div>
					</template>
				</el-table-column>
				<el-table-column label="数量(套)" prop="quantity" :show-overflow-tooltip="true" min-width="230" align="center">
					<template slot-scope="scope">
						<el-input-number v-if="scope.$index != settleAccountsDetailList.length - 1" v-model="scope.row.quantity" :min="1" :max="100000" @change="changePrice(scope.row)"></el-input-number>
						<div v-else>{{ Number(scope.row.quantity) }}</div>
						<!-- <el-input v-model="scope.row.contractPrice" maxlength="20" show-word-limit ></el-input> -->
					</template>
				</el-table-column>
				<el-table-column label="甲方合同价" align="center" prop="contractPrice" :show-overflow-tooltip="true" min-width="230">
					<template slot-scope="scope">
						<el-input-number v-if="scope.$index != settleAccountsDetailList.length - 1" v-model="scope.row.contractPrice" :precision="2" :step="0.1" :max="100000" @change="changePrice(scope.row)"></el-input-number>
						<div v-else>{{ Number(scope.row.contractPrice).toFixed(2) }}</div>
						<!-- <el-input v-model="scope.row.contractPrice" maxlength="20" show-word-limit ></el-input> -->
					</template>
				</el-table-column>
				<el-table-column label="材料费(元)" align="center" prop="packagType" :show-overflow-tooltip="true" min-width="230">
					<template slot-scope="scope">
						<el-input-number v-if="scope.$index != settleAccountsDetailList.length - 1" v-model="scope.row.materialsPrice" :precision="2" :step="0.1" :max="100000" @change="changePrice(scope.row)"></el-input-number>
						<!-- <el-input v-model="scope.row.materialsPrice" maxlength="20" show-word-limit ></el-input> -->
						<div v-else>{{ Number(scope.row.materialsPrice).toFixed(2) }}</div>
					</template>
				</el-table-column>
				<el-table-column label="自付产品运费" align="center" prop="packagType" :show-overflow-tooltip="true" min-width="230">
					<template slot-scope="scope">
						<el-input-number v-if="scope.$index != settleAccountsDetailList.length - 1" v-model="scope.row.productFreight" :precision="2" :step="0.1" :max="100000" @change="changePrice(scope.row)"></el-input-number>
						<!-- <el-input v-model="scope.row.productFreight" maxlength="20" show-word-limit ></el-input> -->
						<div v-else>{{ Number(scope.row.productFreight).toFixed(2) }}</div>
					</template>
				</el-table-column>
				<el-table-column label="乙方结算价格" align="center" prop="settlementPrice" :show-overflow-tooltip="true" min-width="230">
					<template slot-scope="scope">
						<el-input-number v-if="scope.$index != settleAccountsDetailList.length - 1" v-model="scope.row.settlementPrice" :precision="2" :step="0.1" :max="100000" @change="changePrice(scope.row)"></el-input-number>
						<!-- <el-input v-model="scope.row.settlementPrice" maxlength="20" show-word-limit ></el-input> -->
						<div v-else>{{ Number(scope.row.settlementPrice).toFixed(2) }}</div>
					</template>
				</el-table-column>
				<el-table-column label="产品来源" prop="productRepresentativeName" :show-overflow-tooltip="true" min-width="150" />
				<el-table-column label="产品编号" prop="productNumber" :show-overflow-tooltip="true" min-width="150" />
				<el-table-column label="返修类型" prop="maintenanceCategoryName" :show-overflow-tooltip="true" min-width="150" />
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitFormedit">确 定</el-button>
				<el-button @click="edit = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import CreateForm from "@/views/components/CreateForm"
import { mapGetters } from "vuex"
import { getcolumn } from "@/api/selectList"
import { DetailList, updateAccountsDetail, AccountsList, repairProductListw, settleAccounts, deleteAccounts, getAccounts, updateAccounts } from "@/api/synthesize/amount"
export default {
	name: "amountrecords",
	components: { CreateForm },
	computed: {
		...mapGetters(["sidebar"])
	},
	data() {
		return {
			// 列信息
			columns: [
				{ key: 0, label: `结算名称`, visible: true },
				{ key: 1, label: `批次`, visible: true }
			],
			selectProductList: [],
			BackSelectionProcuct: [],
			producttotal: 0,
			settleAccountsDetailList: [],
			eleTabTop: 0, //表格容器距浏览器顶部距离
			rules: {
				settleAccountsName: [{ required: true, message: "结算名称不能为空", trigger: "blur" }],
				batch: [{ required: true, message: "批次不能为空", trigger: "blur" }]
			},
			edit: false,
			recordsopen: false,
			recordsloading: false,
			recordsList: [],
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			multipleRecords: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 参数表格数据
			configList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 日期范围
			dateRange: [],
			queryproductParams: {
				pageNum: 1,
				pageSize: 10,
				repairNumber: undefined,
				repairNumber: undefined
			},
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				settleAccountsName: undefined,
				batch: undefined
			},
			// 表单参数
			form: {},
			productList: [],
			productopen: false,
			productloading: false,
			productIds: [],
			recordIds: [],
			recordId: "",
			recordsSection: [],
			editform: {}
		}
	},
	created() {
		this.getSize()
	},
	mounted() {
		// 滚动条的获取
		this.handleScrollx()
		window.addEventListener("scroll", this.handleScrollx, true)
	},
	activated() {
		this.getSize()
		//获取表格容器距页面头部的距离
		this.handleScrollx()
	},
	destroyed() {
		window.removeEventListener("scroll", this.handleScrollx, true)
	},
	methods: {
		getSize() {
			getcolumn({ pageName: "Pagination57" }).then(response => {
				this.queryParams.pageSize = response.data.length ? (response.data[0].limit ? response.data[0].limit : 10) : 10
				this.getList()
			})
		},
		changeTableData() {
			this.$nextTick(() => {
				this.$refs.table.doLayout()
			})
		},
		/** 搜索按钮操作 */
		handleQueryUser() {
			this.queryproductParams.pageNum = 1
			this.getrepairProductList()
		},
		resetQuerys() {
			this.queryproductParams = {
				pageNum: 1,
				pageSize: 10,
				repairNumber: undefined,
				productNumber: undefined
			}
			this.resetForm("queryproductParams")
		},
		/** 重置按钮操作 */
		resetQueryUser() {
			this.resetQuerys()
			this.handleQueryUser()
		},
		// 去重
		removeSame1(arr) {
			let map = new Map()
			for (let item of arr) {
				// map.has()方法判断map中是否存在这个键
				// 不存在，则将键和值同时设置到map集合中，
				if (!map.has(item.id)) {
					map.set(item.id, item)
				}
			}
			// 返回map的值
			return [...map.values()]
		},
		setRight() {
			this.selectProductList.push(...this.productIds)
			this.selectProductList = this.removeSame1(this.selectProductList)
			this.$refs.multipleTable.clearSelection()
		},
		setLeft() {
			this.BackSelectionProcuct.forEach(item => {
				this.selectProductList.forEach((items, index) => {
					if (item.id == items.id) {
						this.selectProductList.splice(index, 1)
					}
				})
			})
		},
		handleBackUser(selection) {
			this.BackSelectionProcuct = selection
		},
		changeNumber(list, index, index1) {
			let data = this.recordsList[index].settleAccountsParticularsList[index1]
			data.total = Number(data.partQuantity) * Number(data.partsPrice)
			this.changeTotal(list, index)
		},
		// 单击表格行
		row_click(row, column, event) {
			if (column && column.label == "操作") {
				return
			} else {
				this.$refs.table.toggleRowSelection(row)
			}
		},
		submitRecords() {
			let copyData = JSON.parse(JSON.stringify(this.recordsList))
			copyData.forEach(item => {
				item.settleAccountsParticularsList.forEach((items, index) => {
					if (index == item.settleAccountsParticularsList.length - 1) {
						item.totalParts = items.total
						item.settleAccountsParticularsList.splice(index, 1)
					}
				})
			})
			const loading = this.$loading({
				lock: true,
				text: "Loading",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)"
			})
			updateAccountsDetail(copyData)
				.then(res => {
					this.$modal.msgSuccess("修改成功")
					this.recordsopen = false
					loading.close()
				})
				.finally(() => {
					loading.close()
				})
		},
		objectSpanMethod({ row, column, rowIndex, columnIndex }, index) {
			let tableData = this.recordsList[index].settleAccountsParticularsList
			if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
				if (rowIndex % tableData.length === 0) {
					return {
						rowspan: tableData.length,
						colspan: 1
					}
				} else {
					return {
						rowspan: 0,
						colspan: 0
					}
				}
			}
		},
		changeTotal(list, index) {
			let data = JSON.parse(JSON.stringify(this.recordsList[index].settleAccountsParticularsList))
			data.splice(data.length - 1, 1)
			let newData = JSON.parse(JSON.stringify(data))
			let params = {
				repairNumber: this.recordsList[index].repairNumber,
				bnumber: this.recordsList[index].bnumber,
				productModel: this.recordsList[index].productModel,
				quantity: this.recordsList[index].quantity,
				productNumber: this.recordsList[index].productNumber,
				applyTime: this.recordsList[index].applyTime,
				partFigure: "合计",
				partName: undefined,
				partQuantity: undefined,
				priceMaterial: undefined,
				manHour: undefined,
				fiftyHour: undefined,
				partsPrice: undefined,
				total: newData.reduce((sum, item) => sum + Number(item.total), 0),
				remark: undefined
			}
			newData.push(params)
			this.recordsList[index].settleAccountsParticularsList = newData
		},
		changePrice(row) {
			let data = JSON.parse(JSON.stringify(this.settleAccountsDetailList))
			data.splice(data.length - 1, 1)
			let params = {
				repairNumber: "",
				bnumber: "",
				productModel: "",
				customerRepairPrice: "",
				quantity: data.reduce((sum, item) => sum + Number(item.quantity), 0),
				contractPrice: data.reduce((sum, item) => sum + Number(item.contractPrice), 0),
				materialsPrice: data.reduce((sum, item) => sum + Number(item.materialsPrice), 0),
				productFreight: data.reduce((sum, item) => sum + Number(item.productFreight), 0),
				settlementPrice: data.reduce((sum, item) => sum + Number(item.settlementPrice), 0),
				productRepresentativeName: "",
				productNumber: "",
				maintenanceCategoryName: ""
			}
			data.push(params)
			this.settleAccountsDetailList = data
		},
		getSummaries(param) {
			const { columns, data } = param
			const sums = []
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = "合计"
					return
				}
				if (index == 6 || index == 7 || index == 8 || index == 9) {
					const values = data.map(item => Number(item[column.property]))
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr)
							if (!isNaN(value)) {
								return prev + curr
							} else {
								return prev
							}
						}, 0)
						sums[index] += " "
					} else {
						sums[index] = 0 + ""
					}
				}
			})
			console.log(sums)
			return sums
		},
		//获取表格容器距页面头部的距离
		handleScrollx() {
			this.eleTabTop = this.$refs.eleTab.getBoundingClientRect().top
		},
		editData(row) {
			detailsEdit(row).then(res => {
				this.$modal.msgSuccess("修改成功")
			})
		},
		handleSelectionRecords(selection) {
			this.recordsSection = selection
			this.recordIds = selection.map(item => item.id)
			this.multipleRecords = !selection.length
		},
		handleReocrds(row) {
			this.recordId = row.id
			this.recordsopen = true
			this.getdetailList()
		},
		getdetailList() {
			DetailList({ settleAccountsId: this.recordId }).then(res => {
				this.recordsList = res.rows
				let params
				res.rows.forEach(item => {
					item.settleAccountsParticularsList.forEach(items => {
						items.productModel = item.productModel
						items.quantity = item.quantity
						items.productNumber = item.productNumber
						items.repairNumber = item.repairNumber
						items.bnumber = item.bnumber
						items.applyTime = item.applyTime
						params = {
							productModel: item.productModel,
							quantity: item.quantity,
							productNumber: item.repairNumber,
							partFigure: "合计",
							partName: undefined,
							partQuantity: undefined,
							priceMaterial: undefined,
							manHour: undefined,
							fiftyHour: undefined,
							partsPrice: undefined,
							total: item.settleAccountsParticularsList.reduce((sum, item) => sum + Number(item.total), 0),
							remark: undefined
						}
					})
					item.settleAccountsParticularsList.push(params)
				})
			})
		},
		submitFormedit() {
			let newData = this.settleAccountsDetailList[this.settleAccountsDetailList.length - 1]
			// 甲方合同价合计
			this.editform.contractPriceTotal = newData.contractPrice
			// 材料费合计
			this.editform.materialsPriceTotal = newData.materialsPrice
			// 	自付产品运费合计
			this.editform.productFreightTotal = newData.productFreight
			// 乙方结算价格
			this.editform.settlementPriceTotal = newData.settlementPrice
			// 数量
			this.editform.quantityTotal = newData.quantity
			let data = JSON.parse(JSON.stringify(this.settleAccountsDetailList))
			data.splice(this.settleAccountsDetailList.length - 1, 1)
			this.editform.settleAccountsDetailList = data
			const loading = this.$loading({
				lock: true,
				text: "Loading",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)"
			})
			updateAccounts(this.editform)
				.then(res => {
					this.$modal.msgSuccess("修改成功")
					this.edit = false
					loading.close()
					this.getList()
				})
				.finally(() => {
					loading.close()
				})
		},
		handleSelectionProduct(selection) {
			this.productIds = selection
		},
		/** 查询参数列表 */
		getList() {
			this.loading = true
			AccountsList(this.queryParams).then(response => {
				this.configList = response.rows
				this.total = response.total
				this.loading = false
			})
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
		// 表单重置
		reset() {
			this.form = {
				remark: undefined,
				settleAccountsName: undefined,
				batch: undefined
			}
			this.resetForm("form")
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.dateRange = []
			this.resetForm("queryForm")
			this.handleQuery()
		},
		getrepairProductList() {
			console.log(this.queryproductParams, "this.queryproductParams")
			this.productloading = true
			repairProductListw(this.queryproductParams).then(res => {
				this.productList = res.rows
				this.productloading = false
				this.producttotal = res.total
			})
		},
		resetSelect() {
			this.queryproductParams = {
				pageNum: 1,
				pageSize: 10,
				repairNumber: undefined,
				productNumber: undefined
			}
			this.form = {
				remark: undefined,
				settleAccountsName: undefined,
				batch: undefined
			}
			this.resetForm("form")
			this.resetForm("queryproductParams")
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.resetSelect()
			this.selectProductList = []
			this.productList = []
			this.productIds = []
			this.getrepairProductList()
			this.open = true
			this.title = "添加参数"
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.id)
			this.single = selection.length != 1
			this.multiple = !selection.length
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset()
			getAccounts(row.id).then(response => {
				this.editform = response.data
				this.settleAccountsDetailList = this.editform.settleAccountsDetailList
				let params = {
					repairNumber: "",
					bnumber: "",
					productModel: "",
					customerRepairPrice: "",
					quantity: response.data.settleAccountsDetailList.reduce((sum, item) => sum + Number(item.quantity), 0),
					contractPrice: response.data.settleAccountsDetailList.reduce((sum, item) => sum + Number(item.contractPrice), 0),
					materialsPrice: response.data.settleAccountsDetailList.reduce((sum, item) => sum + Number(item.materialsPrice), 0),
					productFreight: response.data.settleAccountsDetailList.reduce((sum, item) => sum + Number(item.productFreight), 0),
					settlementPrice: response.data.settleAccountsDetailList.reduce((sum, item) => sum + Number(item.settlementPrice), 0),
					productRepresentativeName: "",
					productNumber: "",
					maintenanceCategoryName: ""
				}
				this.settleAccountsDetailList.push(params)
				this.edit = true
				this.title = "修改"
			})
		},
		/** 提交按钮 */
		submitForm: function () {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.selectProductList.length == 0) {
						this.$modal.msgWarning("请选择产品")
						return
					}
					let idList = []
					this.selectProductList.forEach(item => {
						idList.push(item.id)
					})
					const loading = this.$loading({
						lock: true,
						text: "Loading",
						spinner: "el-icon-loading",
						background: "rgba(0, 0, 0, 0.7)"
					})
					settleAccounts({ ids: idList, settleAccountsName: this.form.settleAccountsName, batch: this.form.batch })
						.then(response => {
							this.$modal.msgSuccess("新增成功")
							this.open = false
							loading.close()
							this.getList()
						})
						.finally(() => {
							loading.close()
						})
				}
			})
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const configIds = row.id || this.ids
			this.$modal
				.confirm("是否确认删除结算数据项？")
				.then(function () {
					return deleteAccounts(configIds)
				})
				.then(() => {
					this.getList()
					this.$modal.msgSuccess("删除成功")
				})
				.catch(() => {})
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download(
				"/erp/settleAccounts/export",
				{
					...this.queryParams
				},
				`结算_${new Date().getTime()}.xlsx`
			)
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
	margin-top: 0px !important;
}
.userDialog {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.userLeft {
		width: 60%;
	}
	.userRight {
		width: 38%;
		// margin-top: 40px;
	}
	.userRight {
		padding-bottom: 5px;
	}
	.userCenter {
		margin: 0 10px;
		> div:first-child {
			margin-bottom: 50px;
		}
		.el-icon-right,
		.el-icon-back {
			font-size: 30px !important;
		}
	}
}
/* 或者设置对话框内部的某个元素高度 */
/* 隐藏原生滚动条，仅使用.table-container的滚动条 */
// .el-table__body-wrapper::-webkit-scrollbar {
// 	display: none;
// }

// .table-container {
// 	overflow-x: auto; /* 开启滚动条 */
// 	overflow-y: auto;
// }
// /* 添加自定义滚动条 */
// .custom-scrollbar {
// 	height: 70vh;
// 	overflow-y: auto; /* 隐藏Y轴滚动条 */
// 	overflow-x: auto; /* 显示X轴滚动条 */
// 	padding-bottom: 17px; /* 留出空间供滚动条显示 */
// }

// .custom-scrollbar::-webkit-scrollbar {
// 	width: 15px; /* 自定义滚动条宽度 */
// }

// .custom-scrollbar::-webkit-scrollbar-thumb {
// 	background-color: rgba(0, 0, 0, 0.2); /* 自定义滚动条颜色 */
// }

// .custom-scrollbar::-webkit-scrollbar-track {
// 	background-color: #f0f0f0; /* 自定义滚动条轨道颜色 */
// }
// /* 添加这个类来隐藏滚动条 */
// ::v-deep .hide-scrollbar ::-webkit-scrollbar {
// 	display: none !important; /* 针对Webkit浏览器 */
// }

// ::v-deep .hide-scrollbar .el-table__body-wrapper::-webkit-scrollbar {
// 	display: none !important; /* 针对Element UI的el-table */
// }
.onerow {
	display: flex;
	align-items: center;
	::v-deep input[type="text"] {
		border: none;
		outline: none;
	}
	> div {
		width: 220px;
		border: 1px solid;
		height: 38px;
		line-height: 36px;
		text-align: center;
		border-right: none;
		// border-top: none;
	}
}
</style>
